<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <form action="">
        用户名：<input type="text" class="name"> <span></span>
        <br>
        密码：<input type="password">
    </form>
</body>
<script>
    $(function () {
        var unames;
        // 通过ajax 获取数据
        $.ajax({
            url: 'js/user.json',
            success: function (res) {
                // 成功之后拿取数据
                unames = res;
                // console.log(res);
            }
        })

        // 验证用户名
        function checkName(name, argNames) {
            // argNames.forEach(function(val,index,arr){
            //     if(name == val){ // 这个名字在后端存在，此时要提醒数据存在
            //         $('span').text('用户名存在请重新注册').css('color','red');
            //         console.log('12111');
            //         return;
            //     }
            //     console.log(arr.length);
            //     if(index == arr.length-1){
            //         $('span').text('用户名可用').css('color','green');
            //     }
            //     // console.log(index);
            //     // // if(index)
            //     // console.log(val)
            // });
            for (var i = 0; i < argNames.length; i++) {
                if (name == argNames[i]) { // 这个名字在后端存在，此时要提醒数据存在
                    $('span').text('用户名存在请重新注册').css('color', 'red');
                    console.log('12111');
                    return;
                }
                // console.log(arr.length);
                if (i == argNames.length - 1) {
                    $('span').text('用户名可用').css('color', 'green');
                }
                // console.log(index);
                // // if(index)
                // console.log(val)
            }
        }

        // 输入文字后，失去焦点在验证
        $('.name').blur(function () {
            // 获取当前输入的值
            var nameVal = $(this).val();
            console.log(unames);
            checkName(nameVal, unames.user)
        });
    })
</script>

</html>